<template>
  <div class="publicBox bindPhone notBind">
    <bindInfoContentComponent slot="content" :data="data">
      <span slot="infoContent">
        <span class="tips" :class="{ haveData: userInfo.mPhone }">{{
            `${userInfo.mPhone ? "已绑定" + userInfo.mPhone : "敬请期待！"}`
              | filterString(showDetail)
          }}</span>
          <span v-if="userInfo.mPhone">
            <img :src="require('@/assets/images/nsee.png')" class="eyeIcon" v-if="showDetail" @click="showDetail = false" />
            <img :src="require('@/assets/images/see.png')" class="eyeIcon" @click="showDetail = true" v-else />
          </span>
      </span>
      <button @click="handelShowDialog" class="btn-disabled" :disabled="true" slot="button">
          {{ `${userInfo.mPhone ? "修改" : "绑定"}` }}
        </button>
    </bindInfoContentComponent>
    <!-- 弹出框表单 -->
    <el-dialog
      title="绑定手机"
      :visible.sync="dialogVisible"
      ref="dialog"
      :close-on-click-modal="false"
      @close="changeClose"
    >
      <template slot="title">
        <div class="headTitle" v-if="!updatePass">
          {{ userInfo.mPhone ? "修改手机" : "绑定手机" }}
        </div>
        <div v-else />
        <img
          :src="require('@/assets/images/delete.png')"
          @click="handelClose"
        />
      </template>
      <el-form
        :model="bindForm"
        :rules="bindRules"
        ref="form"
        v-if="dialogVisible && !userInfo.mPhone && !updatePass"
        label-width="94px"
        :label-position="'right'"
      >
        <el-form-item label="手机号码：" prop="mPhone">
          <el-input
            v-model.number="bindForm.mPhone"
            @keypress.enter.native.prevent
            placeholder="请输入您的手机号码"
            maxlength="11"
          >
            <el-select
              v-model="bindForm.areaCode"
              slot="prepend"
              placeholder="+86"
            >
              <el-option label="+86" value="中国"></el-option>
              <el-option label="+852" value="中国香港"></el-option>
              <el-option label="+886" value="中国台湾"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="短信验证码：" prop="code">
          <el-input
            v-model="bindForm.code"
            @keypress.enter.native.prevent
            placeholder="请输入验证码"
          ></el-input>
          <div class="tips fetchCodeBtn" @click="handelFetchCode">
            {{ codeLastTime ? ` ${codeLastTime}s` : "短信接收" }}
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handelConfirm">确 定</el-button>
          <el-button @click="handelCancel">取 消</el-button>
        </el-form-item>
      </el-form>
      <el-form
        :model="updateForm"
        :rules="updateRules"
        ref="form"
        v-if="dialogVisible && userInfo.mPhone && !updatePass"
        label-width="94px"
        :label-position="'right'"
      >
        <el-form-item label="手机号码：" prop="mPhone">
          <el-input
            v-model.number="updateForm.mPhone"
            @keypress.enter.native.prevent
            placeholder="请输入您的手机号码"
            maxlength="11"
          >
            <el-select
              v-model="updateForm.areaCode"
              slot="prepend"
              placeholder="+86"
            >
              <el-option label="+86" value="中国"></el-option>
              <el-option label="+852" value="中国香港"></el-option>
              <el-option label="+886" value="中国台湾"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="短信验证码：" prop="code">
          <el-input
            v-model="updateForm.code"
            @keypress.enter.native.prevent
            placeholder="请输入验证码"
          ></el-input>
          <div class="tips fetchCodeBtn" @click="handelFetchCode">
            {{ codeLastTime ? ` ${codeLastTime}s` : "短信接收" }}
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handelConfirm">确 定</el-button>
          <el-button @click="handelCancel">取 消</el-button>
        </el-form-item>
      </el-form>
      <div v-if="updatePass" class="successBox">
        <div>
          <img :src="require('@/assets/images/like.png')" class="passIcon" />
          {{ `手机${userInfo.mPhone ? "修改" : "绑定"}成功！` }}
        </div>
        <div>
          <el-button type="primary" @click="handelCancel">确 定</el-button>
          <span class="timer">{{
            autoClouselastTime ? `${autoClouselastTime}s后自动关闭` : ""
          }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { updateUserInfo } from "@/request/user";
const bindInfoContentComponent = () =>
  import("@/views/user/user/accountBindComponent/bindInfoContentComponent");
export default {
  // 组件销毁前清除定时器
  beforeDestroy() {
    clearInterval(this.lastTimer);
    clearInterval(this.autoCloseDialogTimer);
  },
  components: {
    bindInfoContentComponent
  },
  data() {
    let phomeReg =
      /^1(?:70\d|(?:9[89]|8[0-24-9]|7[135-8]|66|5[0-35-9])\d|3(?:4[0-8]|[0-35-9]\d))\d{7}$/;
    var validatemPhone = (rule, value, callback) => {
      if (this.userInfo.mPhone) {
        if (!this.updateForm.areaCode) {
          callback(new Error("请选择手机归属地！"));
          return;
        }
      } else {
        if (!this.bindForm.areaCode) {
          callback(new Error("请选择手机归属地！"));
          return;
        }
      }
      if (value === "") {
        callback(new Error("手机号不能为空！"));
        return;
      }
      if (!phomeReg.test(value)) {
        callback(new Error("请输入11位，正确的手机号！"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      // 绑定手机号表单数据
      bindForm: {
        mPhone: "",
        code: "",
        areaCode: "", // 区号
      },
      // 绑定手机号表单验证
      bindRules: {
        mPhone: [
          {
            type: "number",
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
          {
            validator: validatemPhone,
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      // 修改手机号表单数据
      updateForm: {
        mPhone: "",
        code: "",
        areaCode: "", // 区号
      },
      // 修改手机号表单验证
      updateRules: {
        mPhone: [
          {
            type: "number",
            required: true,
            message: "请输正确的手机号",
            trigger: "blur",
          },
          {
            validator: validatemPhone,
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      codeLastTime: 0, // 验证码倒计时
      lastTimer: null, // 定时器
      updatePass: false, // 更新成功页面
      autoClouselastTime: 0, // 自动关闭时间
      autoCloseDialogTimer: null, // 自动关闭定时器
      showDetail: true,
      validatemPhone: validatemPhone,
      data: {
        iconName: "iconphone",
        title: "手机",
        tips: "可通过手机号码和密码登录"
      }
    };
  },
  props: {},
  watch: {
    // 选择手机归属地 触发手机号验证内的归属地验证
    "bindForm.areaCode"(n, o) {
      this.$refs.form.validateField("mPhone");
    },
    "updateForm.areaCode"(n, o) {
      this.$refs.form.validateField("mPhone");
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  filters: {
    // 过滤字符串 加星号
    filterString(val, showDetail) {
      if (showDetail) {
        return val;
      } else {
        return val.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
      }
    },
  },
  methods: {
    // 打开弹出框
    handelShowDialog() {
      this.dialogVisible = true;
    },
    // 关闭弹出框
    handelClose() {
      this.dialogVisible = false;
    },
    // 关闭弹窗回调
    changeClose() {
      this.updatePass = false;
    },
    // 取消
    handelCancel() {
      this.dialogVisible = false;
    },
    // 获取验证码
    handelFetchCode(e) {
      // 如果验证码已发送倒计时没结束则退出
      if (this.codeLastTime) return;
      this.codeLastTime = 60;
      this.lastTimer = setInterval(() => {
        --this.codeLastTime;
        // 清除计时器
        if (this.codeLastTime === 0) {
          clearInterval(this.lastTimer);
          this.lastTimer = null;
        }
      }, 1000);
    },
    // 确定
    handelConfirm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 信息校验成功
          this.handelSubmit();
        } else {
          // 信息校验不通过
          return false;
        }
      });
    },
    // 提交数据
    handelSubmit() {
      let params = {
        user: {
          userID: this.userInfo.userID,
          mPhone: this.userInfo.mPhone
            ? this.updateForm.mPhone
            : this.bindForm.mPhone,
          // email: this.userInfo.email,
          // regName: this.userInfo.regName,
          // iconPath: this.userInfo.roleFlag || "/iconPath.png",
          // nickName: this.userInfo.roleFlag || "",
          // roleFlag: this.userInfo.roleFlag || 0,
          // password: md5("zxc123"),
        },
      };
      // updateUserInfo(params).then((res) => {
      // })
      // 展示成功界面
      this.updatePass = true;
      // 打开自动关闭定时器
      this.handelAutoCloseTimer();
      // 重置表单
      this.$refs.form.resetFields();
    },
    // 创建自动关闭dialog计时器
    handelAutoCloseTimer() {
      this.autoClouselastTime = 3;
      this.autoCloseDialogTimer = setInterval(() => {
        --this.autoClouselastTime;
        // 清除计时器
        if (this.autoClouselastTime === 0) {
          this.handelClose();
          clearInterval(this.autoCloseDialogTimer);
          this.autoCloseDialogTimer = null;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="stylus">
.bindPhone {
  .el-dialog__wrapper {
    .el-dialog {
      padding-bottom: 16px;
      width: 510px;
      height: 280px;
      background-color: #ffffff;
      border-radius: 10px;

      .el-dialog__header {
        padding: 24px 36px 0 27px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
          cursor: pointer;
        }

        .headTitle {
          font-family: Segoe UI;
          font-size: 20px;
          color: #666666;
        }

        .el-dialog__headerbtn {
          right: 36px;
          height: 26px;

          .el-dialog__close {
            display: none;
          }
        }
      }

      .el-dialog__body {
        padding: 27px 58px 0 57px;

        .el-form {
          .el-form-item {
            margin-bottom: 20px;

            // display: flex;

            // justify-content: flex-end;
            .el-form-item__label {
              padding-right: 9px;
              font-family: Segoe UI;
              font-size: 14px;
              color: #666666;
            }

            .el-form-item__label::before {
              display: none;
            }

            .el-form-item__content {
              position: relative;
              display: flex;

              .el-input {
                width: 300px;
                height: 40px;

                .el-input__inner {
                  padding-left: 11px;
                  font-family: Segoe UI;
                  font-size: 14px;
                  color: #909090;
                  border-left: none;
                  border-color: rgba(102, 102, 102, 0.4);
                }

                .el-input-group__prepend {
                  background: #fff;
                  border-color: rgba(102, 102, 102, 0.4);

                  .el-select {
                    .el-input {
                      width: 62px;

                      .el-input__inner {
                        padding-right: 0;
                        padding-left: 13px;
                        border: none;
                      }

                      .el-input__inner:focus {
                        border: none;
                      }

                      .el-input__suffix {
                        right: -1px;

                        .el-input__suffix-inner {
                          .el-select__caret {
                            width: 13px;
                            transform: rotate(360deg);
                          }

                          .is-reverse {
                            transform: rotate(540deg);
                          }

                          .el-select__caret::before {
                            content: '\e790';
                            color: #2c2929;
                          }
                        }
                      }
                    }
                  }
                }
              }

              .tips {
                margin-left: 25px;
                width: 84px;
                font-family: Segoe UI;
                font-size: 12px;
                color: #c0c0c0;
              }

              .fetchCodeBtn {
                cursor: pointer;
                position: absolute;
                right: 11px;
                width: 56px;
                text-align: center;
              }

              .fetchCodeBtn::after {
                position: absolute;
                content: '';
                top: 8px;
                bottom: 8px;
                left: -8px;
                height: 24px;
                width: 1px;
                background: rgba(144, 144, 144, 0.55);
              }

              .el-button--primary {
                padding: 0;
                margin-top: 6px;
                margin-left: 20px;
                width: 60px;
                height: 35px;
                background-color: #0e79c0;
                border-radius: 5px;
                font-family: Segoe UI;
                font-size: 16px;
                color: #ffffff;
              }

              .el-button--default {
                padding: 0;
                margin-top: 6px;
                margin-left: 40px;
                width: 60px;
                height: 35px;
                background-color: #ffffff;
                border-radius: 5px;
                border: solid 1px rgba(14, 121, 192, 0.55);
                font-family: Segoe UI;
                font-size: 16px;
                color: #0e79c0;
              }
            }
          }

          .el-form-item:nth-child(2) {
            .el-input__inner {
              border: 1px solid rgba(102, 102, 102, 0.4) !important;
            }
          }
        }

        .successBox {
          padding-top: 44px;
          padding-bottom: 23px;
          height: 183px;
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          align-items: center;
          font-family: Segoe UI;
          font-size: 22px;
          color: #666666;

          .passIcon {
            width: 21px;
            height: 20px;
          }

          .el-button--primary {
            padding: 0;
            width: 60px;
            height: 35px;
            background-color: #0e79c0;
            border-radius: 5px;
            font-family: Segoe UI;
            font-size: 16px;
            color: #ffffff;
          }

          .timer {
            margin-left: 19px;
            font-family: Segoe UI;
            font-size: 12px;
            color: #666666;
          }
        }
      }
    }
  }
}
</style>